﻿@{
    ViewBag.Title = "Home Page";
}
@section breadcrumb {
    <div id="breadcrumb" class="col-md-12">
	    <ol class="breadcrumb">
		    <li><a href="#">Công trình 1</a></li>
			<li><a href="#">Hạng mục 1</a></li>
		</ol>
    </div>
}
@section pageHeader {
    <h3 class="panel-title">Hạng mục 1</h3>
}
@section stypes {
    @Styles.Render("~/Content/jquery-ui.css")
    @Styles.Render("~/Content/ui.jqgrid.css")
    @Styles.Render("~/Content/themes/devoops/css/box.css")
}
@section scripts {
    
    @Scripts.Render("~/Scripts/jquery-ui.js")
    @Scripts.Render("~/Content/themes/devoops/js/devoops.js")
    
    @Scripts.Render("~/Scripts/jquery.jqGrid.min.js")
    @Scripts.Render("~/Scripts/grid.locale-vi.js")
    <script type="text/javascript">
        $(document).ready(function () {
            WinMove();
            $("#jqGrid7").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', width: 50 },
                    { label: 'Mã hiệu', name: 'TenCV', width: 75 },
                    { label: 'Tên công tác / vật tư', name: 'MSCV', width: 400 },
                    { label: 'Đơn vị', name: 'TenCV', width: 75 },
                    { label: 'KL Thi công', name: 'KL', width: 100 },
                    { label: 'KL Định mức', name: 'KL', width: 100 },
                    { label: 'Hệ số', name: 'KL', width: 100 },
                    { label: 'KL Vật tư', name: 'KL', width: 100 },
                ],
                viewrecords: true,
                width: 1000,
                height: 300,
                rowNum: 20,
                pager: "#jqGridPager7"
            });
            $("#jqGrid6").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', width: 50 },
                    { label: 'Khoản mục chi phí', name: 'MSCV', width: 400 },
                    { label: 'Ký hiệu', name: 'TenCV', width: 75 },
                    { label: 'Cách tính', name: 'DV', width: 200 },
                    { label: 'Thành tiền', name: 'KL', width: 100 },
                ],
                viewrecords: true,
                width: 1000,
                height: 300,
                rowNum: 20,
                pager: "#jqGridPager6"
            });
            $("#jqGrid5").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', width: 50 },
                    { label: 'MSCV', name: 'MSCV', width: 75 },
                    { label: 'Tên CV', name: 'TenCV', width: 300 },
                    { label: 'Đơn vị', name: 'DV', width: 75 },
                    { label: 'Khối lượng', name: 'KL', width: 75 },
                    { label: 'Đơn giá', name: 'DGVL', width: 100 },
                    { label: 'Thành tiền', name: 'DGM', width: 100 }
                ],
                viewrecords: true,
                width: 880,
                height: 300,
                rowNum: 20,
                pager: "#jqGridPager5"
            });
            $("#jqGrid4").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', width: 50 },
                    { label: 'MSCV', name: 'MSCV', width: 75 },
                    { label: 'Thành phần hao phí', name: 'TenCV', width: 300 },
                    { label: 'Đơn vị', name: 'DV', width: 75 },
                    { label: 'Định mức', name: 'KL', width: 75 },
                    { label: 'Đơn giá', name: 'DGVL', width: 100 },
                    { label: 'Hệ số', name: 'DGNC', width: 100 },
                    { label: 'Thành tiền', name: 'DGM', width: 100 }
                ],
                viewrecords: true,
                width: 880,
                height: 300,
                rowNum: 20,
                pager: "#jqGridPager4"
            });
            $("#jqGrid").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'State', name: 'State', key: true, width: 50 },
                    { label: 'STT', name: 'STT', width: 50 },
                    { label: 'MSCV', name: 'MSCV', width: 75 },
                    { label: 'Tên CV', name: 'TenCV', width: 300 },
                    { label: 'Đơn vị', name: 'DV', width: 75 },
                    { label: 'Khối lượng', name: 'KL', width: 75 },
                    { label: 'ĐG VL', name: 'DGVL', width: 100 },
                    { label: 'ĐG NC', name: 'DGNC', width: 100 },
                    { label: 'ĐG Máy', name: 'DGM', width: 100 },
                    { label: 'TT VL', name: 'TTVL', width: 100 },
                    { label: 'TT NC', name: 'TTNC', width: 100 },
                    { label: 'TT Máy', name: 'TTM', width: 100 }
                ],
                viewrecords: true,
                width: 1225,
                height: 300,
                rowNum: 20,
                pager: "#jqGridPager"
            });
            $("#jqGrid1").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', key: true, width: 75 },
                    { label: 'Mã VL', name: 'MAVL', width: 75 },
                    { label: 'Tên vật liệu', name: 'TenVL', width: 200 },
                    { label: 'Đơn vị', name: 'DV', width: 100 },
                    { label: 'Hao phí', name: 'HP', width: 100 },
                    { label: 'Giá gốc', name: 'GG', width: 100 },
                    { label: 'Giá TB', name: 'GTB', width: 100 },
                    { label: 'Loại VL', name: 'LVL', width: 100 }
                ],
                viewrecords: true,
                width: 1000,
                height: 250,
                rowNum: 20,
                pager: "#jqGridPager1"
            });
            $("#jqGrid2").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', key: true, width: 75 },
                    { label: 'Mã NC', name: 'MANC', width: 75 },
                    { label: 'Tên nhân công', name: 'TenNC', width: 200 },
                    { label: 'Đơn vị', name: 'DV', width: 100 },
                    { label: 'Hao phí', name: 'HP', width: 100 },
                    { label: 'Giá gốc', name: 'GG', width: 100 },
                    { label: 'Giá TB', name: 'GTB', width: 100 },
                ],
                viewrecords: true,
                width: 1000,
                height: 250,
                rowNum: 20,
                pager: "#jqGridPager2"
            });
            $("#jqGrid3").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', key: true, width: 75 },
                    { label: 'Mã máy', name: 'MAM', width: 75 },
                    { label: 'Tên máy', name: 'TenM', width: 200 },
                    { label: 'Đơn vị', name: 'DV', width: 100 },
                    { label: 'Hao phí', name: 'HP', width: 100 },
                    { label: 'Giá gốc', name: 'GG', width: 100 },
                    { label: 'Giá TB', name: 'GTB', width: 100 },
                ],
                viewrecords: true,
                width: 1000,
                height: 250,
                rowNum: 20,
                pager: "#jqGridPager3"
            });
        });

        $(function () {
            $('.list-group.checked-list-box .list-group-item').each(function () {

                // Settings
                var $widget = $(this),
                    $checkbox = $('<input type="checkbox" class="hidden" />'),
                    color = ($widget.data('color') ? $widget.data('color') : "primary"),
                    style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
                    settings = {
                        on: {
                            icon: 'glyphicon glyphicon-check'
                        },
                        off: {
                            icon: 'glyphicon glyphicon-unchecked'
                        }
                    };

                $widget.css('cursor', 'pointer')
                $widget.append($checkbox);

                // Event Handlers
                $widget.on('click', function () {
                    $checkbox.prop('checked', !$checkbox.is(':checked'));
                    $checkbox.triggerHandler('change');
                    updateDisplay();
                });
                $checkbox.on('change', function () {
                    updateDisplay();
                });


                // Actions
                function updateDisplay() {
                    var isChecked = $checkbox.is(':checked');

                    // Set the button's state
                    $widget.data('state', (isChecked) ? "on" : "off");

                    // Set the button's icon
                    $widget.find('.state-icon')
                        .removeClass()
                        .addClass('state-icon ' + settings[$widget.data('state')].icon);

                    // Update the button's color
                    if (isChecked) {
                        $widget.addClass(style + color + ' active');
                    } else {
                        $widget.removeClass(style + color + ' active');
                    }
                }

                // Initialization
                function init() {

                    if ($widget.data('checked') == true) {
                        $checkbox.prop('checked', !$checkbox.is(':checked'));
                    }

                    updateDisplay();

                    // Inject the icon if applicable
                    if ($widget.find('.state-icon').length == 0) {
                        $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
                    }
                }
                init();
            });

            $('#get-checked-data').on('click', function (event) {
                event.preventDefault();
                var checkedItems = {}, counter = 0;
                $("#check-list-box li.active").each(function (idx, li) {
                    checkedItems[counter] = $(li).text();
                    counter++;
                });
                $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
            });
        });
   </script>
}
<div role="tabpanel" style="padding-left: 10px;">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tiên lượng</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Dự thầu</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">THKP Hạng mục</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Phân tích vật tư</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active " id="home">
        <div style="overflow:auto">
            <table id="jqGrid"></table>
            <div id="jqGridPager" style="text-align:left;"></div>
        </div>
        
        <div class="row">
          <div class="col-md-12">
        		<ul class="list-group checked-list-box list-inline" style="margin-bottom:0px">
                  <li><h4>Hiển thị: </h4></li>
                  <li class="list-group-item"> Đơn giá</li>
                  <li class="list-group-item" style="width:100px"> Kích thước</li>
                  <li class="list-group-item" data-checked="true"> Thành tiền</li>
                  <li class="list-group-item"> VL phụ</li>
                  <li class="list-group-item"> Hệ số</li>
                  <li><span class="glyphicon glyphicon-option-vertical"></span></li>
                  <li class="list-group-item"> Ẩn diễn giải khối lượng</li>
                </ul>
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
        <hr />
        <div class="row">
          <div class="col-md-12">
              <div role="tabpanel">
                  <!-- Nav tabs -->
                  <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#tabvl" aria-controls="tabvl" role="tab" data-toggle="tab">Vật liệu</a></li>
                    <li role="presentation"><a href="#tabnc" aria-controls="tabnc" role="tab" data-toggle="tab">Nhân công</a></li>
                    <li role="presentation"><a href="#tabma" aria-controls="tabma" role="tab" data-toggle="tab">Máy</a></li>
                    <li class="list-group-item">
                        <div class="input-prepend input-append">
                          <span class="add-on">Hệ số ĐM: </span>
                          <input class="span3" id="appendedPrependedInput" type="number" value="1.0" step="0.1">
                        </div>
                    </li>
                  </ul>
              <!-- Tab panes -->
                  <div class="tab-content" >
                    <div role="tabpanel" class="tab-pane fade in active" id="tabvl" style="overflow:auto">
                        <table id="jqGrid1"></table>
                        <div id="jqGridPager1"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabnc">
                        <table id="jqGrid2"></table>
                        <div id="jqGridPager2"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabma">
                        <table id="jqGrid3"></table>
                        <div id="jqGridPager3"></div>
                    </div>
                  </div>
              </div>
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </div>
    <div role="tabpanel" class="tab-pane fade" id="profile">
        <div class="tabbable tabs-right">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab">Chiết tính</a></li>
          <li><a href="#b" data-toggle="tab">ĐG Dự thầu</a></li>
        </ul>
        <div class="tab-content">
         <div class="tab-pane active" id="a" style="height:100%">
             <div style="overflow:auto">
                        <table id="jqGrid4"></table>
                        <div id="jqGridPager4"></div>
             </div>
                <ul class="list-group checked-list-box list-inline" style="margin-bottom:0px">
                  <li><h4>Hiển thị: </h4></li>
                  <li class="list-group-item"> MSVT</li>
                  <li class="list-group-item" data-checked="true"> VL</li>
                  <li class="list-group-item"> NC</li>
                  <li class="list-group-item"> Máy</li>
                  <li><span class="glyphicon glyphicon-option-vertical"></span></li>
                  <li class="list-group-item"> CP chung theo NC</li>
                  <li class="list-group-item"> CP lán trại</li>
                  <li class="list-group-item" data-checked="true"> CP ĐB giao thông</li>
                  <li><span class="glyphicon glyphicon-option-vertical"></span></li>
                  <li class="list-group-item"> Hao phí ảo</li>
                </ul>
                <ul class="list-group checked-list-box list-inline" style="margin-bottom:0px">
                  <li><h5>Giá VT theo:  </h5></li>
                    <li class="btn-group dropup " style="width:250px">
                        <select class="form-control">
                            <option value="one">SonLa_2008CX</option>
                            <option value="two">Sơn La</option>
                            <option value="three">Hà Nội</option>
                        </select>
                  </li>
                  <li><span class="glyphicon glyphicon-option-vertical"></span></li>
                  <li><h5>Kiểu thầu: </h5></li>
                    <li class="btn-group dropup " style="width:250px">
                        <select class="form-control">
                            <option value="one">SonLa_2008CX</option>
                            <option value="two">Sơn La</option>
                            <option value="three">Hà Nội</option>
                        </select>
                  </li>
                  <li><span class="glyphicon glyphicon-option-vertical"></span></li>
                  <li><button type="button" class="btn btn-default">Hệ số CPXL</button></li>          
                </ul>
         </div>
         <div class="tab-pane" id="b">
                        <table id="jqGrid5"></table>
                        <div id="jqGridPager5"></div>
         </div>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="messages">
        <div style="overflow:auto">
                        <table id="jqGrid6"></table>
                        <div id="jqGridPager6"></div>
             </div>
                <ul class="list-group checked-list-box list-inline" style="margin-bottom:0px">
                  <li><h5>Mẫu TKKPHM:  </h5></li>
                  <li class="btn-group dropup " style="width:250px">
                        <select class="form-control">
                            <option value="one">Mẫu bù giá</option>
                            <option value="two">Mẫu bù giá đầy đủ</option>
                            <option value="three">Mẫu bù giá rút gọn</option>
                            <option value="four">Mẫu nhân hệ số điều chỉnh máy trước bù</option>
                            <option value="five">BV-CB</option>
                        </select>
                  </li>
                  <li><a href="#"><span class="glyphicon glyphicon-folder-open"></span></a></li>  
                  <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span></a></li>  
                  <li><a href="#"><span class="glyphicon glyphicon-floppy-disk"></span></a></li>  
                  <li><a href="#"><span class="glyphicon glyphicon-floppy-saved"></span></a></li>  
                  <li><a href="#"><span class="glyphicon glyphicon-floppy-remove"></span></a></li>  
                  <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span></a></li>
                  <li><button type="button" class="btn btn-default">Hệ số CPXL</button></li>        
                  <li><button type="button" class="btn btn-default">Sửa chữ ký</button></li>   
                </ul>
                <ul class="list-group checked-list-box list-inline" style="margin-bottom:0px">
                    <li><h5>Font: </h5></li>
                    <li>
                        <select class="form-control">
                            <option value="one">Times New Roman</option>
                            <option value="two">Arial</option>
                            <option value="three">Tahoma</option>
                        </select>
                    </li>
                    <li>
                        <select class="form-control">
                            <option value="one">11</option>
                            <option value="two">12</option>
                            <option value="three">13</option>
                            <option value="three">13.5</option>
                            <option value="three">14</option>
                            <option value="three">15</option>
                        </select>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-bold"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-italic"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-align-center"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-align-right"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-option-vertical"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-text-background"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-text-color"></span></a></li>
                </ul>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="settings">
        <div style="overflow:auto">
                        <table id="jqGrid7"></table>
                        <div id="jqGridPager7"></div>
            <ul class="list-group checked-list-box list-inline" style="margin-bottom:0px">
                  <li><h4>Hiển thị: </h4></li>
                  <li class="list-group-item"> Vật liệu</li>
                  <li class="list-group-item" data-checked="true"> Nhân công</li>
                  <li class="list-group-item"> Máy</li>
                  <li><span class="glyphicon glyphicon-option-vertical"></span></li>
                  <li class="list-group-item"> Cột hệ số</li>
                  <li class="list-group-item"> Mã vật tư</li>
                  <li class="list-group-item" data-checked="true"> Tên nhóm vật tư</li>
                </ul>
             </div>
    </div>
  </div>
</div>
